<template>
  <div class="sub-mch-list">
    <h5>
      店铺筛选
      <template v-if="subMchList.length > 0">
        （{{ subMchList.length }}）
      </template>
      <el-checkbox
        v-if="subMchList.length > 0"
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >
        全选
      </el-checkbox>
    </h5>
    <div style="padding: 10px;">
      <el-input
        class="search-text"
        @input="getSubMch"
        v-model="searchText"
        clearable
        placeholder="请输入店铺名称搜索"
      />
    </div>
    <el-scrollbar v-loading="loading">
      <el-checkbox-group
        v-model="selSubMchList"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          v-for="item in subMchList"
          :label="item.subMchId"
          :key="item.subMchId"
        >
          {{ item.name }}（{{ item.productNumber }}）
        </el-checkbox>
      </el-checkbox-group>
      <el-empty
        v-if="subMchList.length == 0"
        description="未查询到店铺"
        :image-size="100"
      ></el-empty>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  name: 'SubMchList',
  data () {
    return {
      loading: false,
      checkAll: false,
      isIndeterminate: true,
      subMchList: [], // 店铺列表
      selSubMchList: [], // 已选择店铺列表
      searchText: ''
    }
  },
  watch: {
    selSubMchList: {
      immediate: true,
      handler (n) {
        let newVal = n || []
        this.$emit('input', newVal)
        this.$emit('change', newVal)
      },
      deep: true
    }
  },
  created () {
    this.getSubMch()
  },
  methods: {
    handleCheckAllChange (val) {
      this.selSubMchList = val ? this.subMchList.map(_ => _.subMchId) : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.subMchList.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.subMchList.length
    },

    // 获取店铺
    getSubMch () {
      this.loading = true
      this.selSubMchList = []
      this.$POST('sot-admin-api/merchant/sub/querySubMchAnalysisList', {
        status: 1,
        name: this.searchText
      })
        .then(res => {
          if (res.errorCode === '00000') {
            this.subMchList = res.data.list
            if (this.subMchList.length > 100) {
              this.subMchList.length = 100 // 如果超出100个，只渲染100个
            }
          }
        })
        .finally(_ => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.sub-mch-list {
  :deep(.el-checkbox) {
    display: block;
    margin-right: 0;
    padding: 0 10px;
    &:hover {
      background: #f5f7fa;
    }
  }

  :deep(.el-input__inner) {
    border-color: #dcdfe6 !important;
  }
}
</style>
